import React from 'react';
import ReactDOM from 'react-dom';

// 基础jsx、样式
let style = {
    fontSize: "20px"
}
let jsx = <div className="jsx" style={style}>jsx...</div>;

ReactDOM.render(
    jsx,
    document.getElementById('app')
);


// 数据逻辑判断
let name = 'viiv';
let names = ['viiv', 'seek', '小花'];
let flag = true;
let jsx = (
    <div>
        {/* 变量的使用 */}
        <p>i am not {name}</p>
        {/* 条件判断 */}
        {
            flag ? <p>i am {name}</p> : <p>i am not {name}</p>
        }
        {/* 数组循环 */}
        {
            names.map((name, index) => <p key={index}>hello, i am {name}</p>)
        }
    </div>
);

ReactDOM.render(
    jsx,
    document.getElementById('app')
);